<template>
  <base-wraper>
    <base-header>
      <el-input v-model="listQuery.modelName" clearable placeholder="型号" style="width: 200px" />
      <el-select v-model="listQuery.brandId" clearable placeholder="品牌" style="width: 200px;margin-left: 10px;"  >
<!--        <el-option value="1" label="yamaha"/>-->
<!--        <el-option value="2" label="suzuki"/>-->
<!--        <el-option value="3" label="kawasaki"/>-->
<!--        <el-option value="4" label="honda"/>-->
<!--        <el-option value="5" label="bmw"/>-->
<!--        <el-option value="6" label="triumph"/>-->
        <el-option v-for="item in brandList" :label="item.brandName" :value="item.id"></el-option>
      </el-select>
      <el-button type="primary" style="margin-left: 10px" @click="refreshTableData">查询</el-button>
    </base-header>

    <base-table-p ref="baseTable" api="manual.listPage" :params="listQuery">
      <el-table-column prop="modelName" label="型号名称" />
      <el-table-column prop="modelYear" label="年份" />
      <el-table-column prop="modelBrand" label="品牌" />
      <el-table-column label="操作" align="center" width="250">
        <template v-slot="scope">
          <el-button link @click="detail(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </base-table-p>


    <base-dialog v-model="dialogVisible" :title="cataLogTitile" width="90%" >
      <iframe :src="cataLogUrl"  frameborder="0" width="100%" height="700rem"></iframe>
    </base-dialog>

  </base-wraper>
</template>
<script setup lang="ts">
import {reactive, toRefs, getCurrentInstance, onMounted} from 'vue'
import {ElNotification} from "element-plus";
import { h } from 'vue'
// 组件实例
const { proxy }: any = getCurrentInstance()
// 响应式
const state = reactive({
  form: {} as any,
  dialogVisible: false,
  listLoading: false,
  listQuery: {
    modelName: '',
    brandId: '',
  },
  psdUrl:"http://127.0.0.1:8001/demo/mapper/pdf/index.html?url=",
  cataLogTitile:'',
  cataLogUrl:'',
  dialogStatus: '',
  pdfBaseUrl: 'http://des1gnmini.natapp1.cc',
  textMap: {
    update: '编辑',
    create: '添加',
  } as any,
  brandList:[{
    brandName:'',
    id:''
  }]
})
const { form, dialogVisible, listQuery, dialogStatus, textMap, cataLogTitile,cataLogUrl,psdUrl,brandList } = toRefs(state)

onMounted(()=>{
  loadBrandSelect()
})

async function loadBrandSelect() {
  let res = await proxy.$api.manual.getAllBrand();
  state.brandList = res.data
}

async function refreshTableData() {
  proxy.$refs.baseTable.refresh()
}
async function detail(row: any) {
  const param = {
    "modelId":row.id
  }
  let res = await proxy.$api.manual.detail(param)
  if (res.data != ""){
    state.cataLogTitile = row.modelName+'-'+row.modelYear
    state.dialogVisible = true
    state.cataLogUrl = state.pdfBaseUrl+res.data
  }else {
    ElNotification({
      title: '抱歉',
      message: h('i', { style: 'color: teal' }, '暂无相关资源'),
    })
  }

}
</script>
<style scoped></style>
